<script lang="ts" setup>
import * as courseApi from "@/api/train/course";
import CourseItem from "./course-item.vue";
import { ListCourseWithPrice, ListCourse } from "@/types/course";

const props = defineProps({
  category: {
    type: String,
    default: "all",
  },
  class: {
    type: String,
    default: "",
  },
  type:{
    type: String,
    default: "",
  }
});


const courseList = ref<(ListCourseWithPrice | ListCourse)[]>([]);

// 分页
const params = ref({
  pageNo: 1,
  pageSize: 10,
  carType: props.type,
});
const resetParams = () => {
  params.value.pageNo = 1;
  params.value.pageSize = 10;
};

// 加载列表
const loadList = (concat: boolean = false) => {
  const func = props.category === "mine" ? courseApi.getPurchasedCoursePage : courseApi.getCoursePage;
  func(params.value)
    .then((res) => {
      const newCourseList = res.data.list;
      courseList.value = concat ? courseList.value.concat(newCourseList) : newCourseList;
      infinityValue.value = false;
      if (newCourseList.length < params.value.pageSize) {
        hasMore.value = false;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

// 上拉加载
const infinityValue = ref(false);
const hasMore = ref(true);
const loadMore = () => {
  params.value.pageNo++;
  loadList(true);
};


loadList();
</script>

<template>
  
  <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore" load-more-txt="—— 没有更多了 ——">
    <!-- 列表 -->
    <ul v-if="courseList.length" :class="props.class">
      <CourseItem v-for="item in courseList" :key="item.id" :course="item" :category="category" />
    </ul>
    <nut-empty v-else image="empty" description="暂无课程" />
  </nut-infinite-loading>
</template>

<style>
.tab-search {
  padding: 0 12px;
  overflow-x: scroll;
  display: flex;
  align-items: center;
}

._tab_item {
  padding: 4px 10px;
  background-color: #eee;
  font-size: 12px;
  border-radius: 4px;
  width: max-content;
  color: #666;
  margin-right: 10px;
}

._tab_item_active {
  color: #fff;
  background-color: #1e6fff;
}
</style>
